<template>
  <div class="xiao">
    <!-- <div class="z">
      <div id="nav">
        <router-link :to="item.path" v-for="(item, key) in list" :key="key">{{
          item.name
        }}</router-link>
      </div>
    </div> -->
    <div class="but">
      <div class="jz">
        <div class="left">
          <li v-for="(item, index) in $store.state.brochure.data" :key="index">
            <img :src="item.base_info.cover_img" alt="" />
            <div class="wen">
              <h1>{{ item.base_info.title }}</h1>
              <p>{{ item.base_info.summary }}</p>
              <p>{{ item.user_info.user_name }}</p>
              <div class="jia">
                <h2>￥{{ item.base_info.price }}</h2>
                <span>28小节 3047人已购买</span>
              </div>
            </div>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      brochure: this.$store.state.brochure,
    };
  },
  created() {},
  computed: {},
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.xiao {
  width: 100%;
  height: auto;
  background: #f4f5f5;
  .z {
    background-color: white;
    width: 100%;
    height: auto;
    #nav {
      width: 960px;
      margin:0 auto;
      display: flex;
      justify-content: flex-start;

      a {
        line-height: 55px;
        font-size: 18px;
        text-decoration: none;
        color: rgb(134, 147, 161);
        margin-right: 30px;
        &.router-link-exact-active {
          color: rgb(68, 149, 255);
        }
        &:hover {
          color: rgb(68, 149, 255);
        }
      }
    }
  }
  .but {
    margin-top: 15px;
    background: #f4f5f5;
    width: 100%;
    height: auto;
    .jz {
      width: 960px;
      height: auto;
      margin:0 auto;
      display: flex;
      justify-content: space-between;
      .left {
        background: white;
        width: 875px;
        height: auto;
        li {
          list-style: none;
          display: flex;
          justify-content: space-between;
          padding: 15px 35px;
          border: 1px solid #ebecec;
          .wen {
            flex: 999;
            text-align: left;
            h1 {
              font-size: 22px;
            }
            p {
              margin: 10px 0px;
            }
            .jia {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              h2 {
                color: #ed7b11;
                margin-right: 10px;
              }
              span {
                color: #c3c5c7;
                font-size: 13px;
              }
            }
          }
          img {
            margin-right: 25px;
            width: 126px;
            height: 176px;
          }
        }
      }
      .right {
        background: #f4f5f5;
        width: 300px;
        .write {
          box-shadow: 1, 1, 1, 1, black;
          background-color: white;
          margin-top: 20px;
          width: 100%;
          height: 115px;
          display: flex;
          justify-content: center;
          margin-bottom: 90px;
          border: 1px solid #dedfe0;
          img {
            margin: 15px 30px;
            width: 69px;
            height: 45px;
          }
          span {
            cursor: pointer;
            border-right: 1px solid #f4f5f5;
            text-align: center;
            width: 50%;
            height: 115px;

            &:hover {
              background: #f9f9f9;
            }
          }
        }
      }
    }
  }
}
</style>
